<template>
  <div class="todo-box">
    <el-select class="todo-select" v-model="filterTodo" @change="onTodoChange">
      <el-option label="消息待办" value="message"></el-option>
      <el-option label="报告分析" value="report"></el-option>
    </el-select>
    <div class="ly-border-card todo-list">
      <div class="flex-center-between">
        <van-search
          style="flex: 1;min-width: 0;"
          autocomplete="off"
          v-model="searchKeyword"
          clearable
          @search="onSearchFn"
          :show-action="false"
          placeholder="搜索关键词"
        />
        <van-button
          class="search-btn"
          @click.stop="onSearchFn"
          type="primary"
          size="small"
        >查询
        </van-button
        >
      </div>
      <TodoListComp :todo-list="todoList"></TodoListComp>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import TodoListComp from "@/components/TodoListComp.vue";

const filterTodo = ref('message')
const todoList = ref([
  {
    name: '待办消息11111',
    id: '1',
    date: '2025-05-21'
  },
  {
    name: '待办消息22222',
    id: '2',
    date: '2025-05-21'
  },
  {
    name: '待办消息33333',
    id: '3',
    date: '2025-05-21'
  }
])

function onTodoChange() {

}

const searchKeyword = ref('')

function onSearchFn() {

}

</script>

<style scoped lang="scss">
.todo-box {
  .todo-select {
    width: 150px;

    :deep(.el-select__wrapper) {
      box-shadow: none;
      outline: none;
      background-color: transparent;
    }
  }
}
</style>
